<template>
    <div class="teachMenu">
        <button @click="down" class="btn down"></button>
        <button @click="up" class="btn up"></button>
        <ul :class="{openMenu:isOpen}" class="menuCont clearfix">
            <li v-if="!showResource" class="menuItem ketangziyuan">课堂资源
                <img src="../assets/images/TeachingMenu/Resources_ac.png" alt=""></li>
            <li v-if="!showResource" class="menuItem beikeziyuan">备课资源
                <img src="../assets/images/TeachingMenu/book_ac.png"></li>
            <li @click="sendResource" v-if="showResource && !sendResourceOverDM" class="menuItem sendResource">发送
                <img src="../assets/images/TeachingMenu/send_ac.png" alt="">
            </li>
            <li @click="closeResource" v-if="showResource && !sendResourceOverDM" class="menuItem closeResource">关闭
                <!--<img src="../assets/images/TeachingMenu/close.png" alt="">-->
            </li>
            <li @click="againSendResource" v-if="sendResourceOverDM" class="menuItem sendResource">再次发送
                <img src="../assets/images/TeachingMenu/send_ac.png" alt="">
            </li>
            <li @click="overResource" v-if="sendResourceOverDM" class="menuItem closeResource">结束
                <!--<img src="../assets/images/TeachingMenu/close.png" alt="">-->
            </li>
        </ul>
        <button @click="openClose" class="btn menu"></button>
    </div>
</template>
<script type="text/ecmascript-6">
    import {mapGetters, mapActions} from 'vuex'
    import store from '../store/'
    import axios from 'axios'
    export default {
        name: "teachMenu",
        props: {
//            'skbg': {
//                type:Boolean,
//            }
        },
        computed: mapGetters([
            'showResource',
            'BeginTeaching',
            'dialogClassTestisible',
            'dialogSHITIVisible',
            'sendResourceOverDM',
            'TeachMaterial'
        ]),
        data () {
            return {
                isOpen: false,
                fristOpen: true,
                loader: new SVGLoader(document.getElementById('loader2'), {speedIn: 400, easingIn: mina.easeinout}),
            }
        },
        mounted(){
        },
        methods: {
            down(){
                $('.sk_bg').stop().animate({'height': '30%'})
            },
            up(){
                $('.sk_bg').stop().animate({'height': '0%'})
            },
            openClose(){
                if (this.fristOpen === true) {
                    var W = 0;
                    $('.menuItem').each(function () {
                        W += parseFloat($(this).width())
                    })
                    $('.menuCont').width(W + $('.menuItem').length * 40)
                    this.fristOpen = false
                }


                this.isOpen = !this.isOpen
                if (this.isOpen == true) {
                    $('.menuCont').css({overflow: 'hidden'})
                    $('.menuCont img').hide()
                } else {
                    setTimeout(function () {
                        $('.menuCont').css({overflow: 'visible'})
                        $('.menuCont img').show()
                    }, 350)
                }
            },
            closeResource(){
                store.state.mutations.TeachMaterial = false
                store.state.mutations.showResource = false;
                store.state.mutations.dialogClassTestisible.show = false;
                store.state.mutations.dialogSHITIVisible.show = false;
            },
            sendResource(){
//                this.$http.post(('api/ReExam/GetReExamByLessionID' + '&sk=' + store.state.mutations.getToken), {
//                    LessionID: LessionID,
//                    TeacherID: store.state.mutations.USERINFO.ID,
//                    ExamTime: new Date()
//                }).then(function (res) {
//                    console.log(res.data.data)
//                })
                var _this = this;
                _this.loader.show()
                VoteStudent = UserCode
                axios({
                    method: "POST",
                    url: 'api/ReExam/GetReExamByLessionID' + '?sk=' + store.state.mutations.getToken,
                    data: {
                        LessionID: LessionID,
                        ResourceID: ResourceID,
                        ExamTime: ExamTime
                    }
                }).then(function (res) {
                    console.log(res.data)
                    setTimeout(function () {
                        store.state.mutations.sendResourceOverDM = true
                        store.state.mutations.dialogSHITIVisible.show = false;
                        var ResourceString = 'http://192.168.1.101:96/ReTest/Index?ResourceID=' + ResourceID + '&VoteID=199011221535' + '&LessionID=' + LessionID + '&TeacherID=' + store.state.mutations.USERINFO.ID + '&ExamID=' + res.data.data.data.ID + '&BeginTeachingTime=' + ExamTime + '&ServerIP=http://127.0.0.1:87556'
                        for (let i = 0; i < UserCode.length; i++) {
                            SendMsg("OpenWeb", UserCode[i], ResourceString)
                        }
                        UserVote('199011221535', '' + store.state.mutations.loginName + '')
                        _this.loader.hide()
                        layer.msg('已推送至学生平板', {time: 1000});
                    }, 2000)
                });
            },
            againSendResource(){
//                VoteStudent = UserCode
                axios({
                    method: "POST",
                    url: 'api/ReExam/GetReExamByLessionID' + '?sk=' + store.state.mutations.getToken,
                    data: {
                        LessionID: LessionID,
                        ResourceID: ResourceID,
                        ExamTime: ExamTime
                    }
                }).then(function (res) {
                    console.log(res.data)
                    store.state.mutations.sendResourceOverDM = true
                    store.state.mutations.dialogSHITIVisible.show = false;
                    var ResourceString = 'http://192.168.1.101:96/ReTest/Index?ResourceID=' + ResourceID + '&VoteID=199011221535' + '&LessionID=' + LessionID + '&TeacherID=' + store.state.mutations.USERINFO.ID + '&ExamID=' + res.data.data.data.ID + '&BeginTeachingTime=' + ExamTime + '&ServerIP=' + ServerIP

                    console.log(ResourceString)

                    SendMsg("OpenWeb", UserCode, ResourceString)
                    UserVote('199011221535', '' + store.state.mutations.loginName + '')
                    layer.msg('再次推送至学生平板', {time: 1000});
                });
            },
            overResource(){

                store.state.mutations.sendResourceOverDM = false;
                store.state.mutations.showResource = false;
                layer.msg('结束推送，进入对比页面')

            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss">
    /*.TaskWarp {*/
    /*width: 100% !important;*/
    /*height: 100% !important;*/
    /*}*/

    /*.classTask {*/
    /*width: 100% !important;*/
    /*height: 100% !important;*/
    /*}*/

    /*.Close{*/
    /*display: none !important;*/
    /*}*/
    .teachMenu {
        position: fixed;
        bottom: 20px;
        right: 80px;
        z-index: 789789;
        /*background: red;*/
        .btn {
            border-radius: 30px;
            width: 60px;
            height: 60px;
            border: none;
            position: relative;
            margin-left: 12px;
            float: left;
        }
        .down {
            background: #fff url("../assets/images/TeachingMenu/down.png") no-repeat;
            background-size: cover;
        }
        .up {
            background: #fff url("../assets/images/TeachingMenu/up.png") no-repeat;
            background-size: cover;
        }
        .menu {
            background: #fff url("../assets/images/TeachingMenu/Open.png") no-repeat;
            background-size: cover;
        }
        .menuCont {
            float: left;
            transform-origin: right;
            border-radius: 30px 0 0 30px;
            background: #fff;
            box-shadow: 2px 2px 50px rgba(0, 0, 0, .1);
            height: 60px;
            z-index: 1;
            transition: width .3s linear;
            padding-right: 80px;
            transform: translateX(40px);
            /*overflow: visible;*/
            .menuItem {
                line-height: 60px;
                height: 60px;
                float: left;
                padding-left: 40px;
                display: inline-block;
                text-align: center;
                position: relative;
                cursor: pointer;
                min-width: 80px;
                img {
                    position: absolute;
                    left: 30px;
                    right: 0;
                    margin: auto;
                    display: block;
                    bottom: 60px;
                    /*display: none;*/
                }
            }
            .menuItem:active {
                img {
                    transform: scale(0.8);
                }
            }
        }
        .openMenu {
            width: 0 !important;
            padding-right: 0;
        }
    }
</style>